<!--
 * @Descripttion: ''
 * @Author: lilong(lilong@hztianque.com)
 * @Date: 2020-08-14 16:11:11
 * @LastEditTime: 2020-11-09 08:56:56
--> 
<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div class="cmap-box" id="cmap"></div>
  </div>
</template>
<script>
import CMap from "../../node_modules/@ektx/cmap/src/index.js";
import { cmapData } from "../mockData/mapCity.js";
export default {
  data() {
    return {
      cmapData
    };
  },
  methods: {
    initMap() {
      let options = {
        el: "#cmap",
        map: {
          boundary: {
            data:this.cmapData.areaData,
            style: {
              lineWidth: 8,
              strokeStyle: "#538df7",
              fillStyle: "transparent"
            }
          },
          blocks: {
            data:this.cmapData.cityArr,
            point: {
              size: {
                min: 1,
                max: 5
              },
              r: [2, 3],
              color: ["#fff", "#4fff5f"]
            },
            cityName: {
              normal: {
                fillStyle: "#fff",
                font: "1em 'Microsoft Yahei'"
              },
              hover: {
                fillStyle: "#4fff5f",
                font: "1.5em 'Microsoft Yahei'"
              },
              // 定位
              move: {
                x: 10,
                y: 10
              },
              // 文字与宽度比例
              txtVSWidth: 3
            },
            style: {
              lineWidth: 3,
              strokeStyle: "#243e6a",
              fillStyle: "rgba(0, 0, 0, .4)",
              hoverColor: "rgba(83, 141, 247, .2)",
              holdColor: "rgba(83, 141, 247, .4)"
            }
          }
        },
        callback: {
          click: function(evt, data) {
            // myMap.history.push({
            //   key: data.index,
            //   boundary: huaian.areaData,
            //   blocks: huaian.citysArr
            // });
          },
          mousemove: function(evt, data) {
            console.log(evt, data);
          }
        }
      };
      // options.map.boundary.data = this.cmapData.areaData;
      // options.map.blocks.data = this.cmapData.cityArr;
      let myMap = new CMap(options);

      myMap.init();
      myMap.fadeIn();
    }
  },
  mounted() {
    console.log(CMap)
    this.initMap();
  }
};
</script>

<style lang="scss">
.cmap-box {
  width: 400px;
  height: 400px;
  position: relative;
  background: cyan;
}
</style>